<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <!--
 百度前端技术学院 
  @2016/03/14
  by ID
 -->
  <header>
    <img src="img/loading_32x32.gif">
    <span>
     <a href="javascript:void(0);">登录</a>|<a href="javascript:void(0);">注册</a>
   </span>
  </header>
  <h1>
    这是一个一级标题，开始我们的前端标签之旅…………
    </h1>
  <nav>头部导航
    <ul>
      <li><a href="javascript:void(0);">导航连接</a></li>
      <li><a href="javascript:void(0);">导航连接</a></li>
      <li><a href="javascript:void(0);">导航连接</a></li>
      <li><a href="javascript:void(0);">导航连接</a></li>
      <li><a href="javascript:void(0);">导航连接</a></li>
    </ul>
  </nav>
  <main>
    <article>
      <header>
        <h1>1.常用标签</h1>
        <h4>常用标签的介绍</h4>
        <p>写在前面的话</p>
        <p>ID
          <time pubdate="20100314" datetime="20100314">20160314</time>
        </p>
        <address>
          <p>地址：xxxxx</p>
          <p>邮箱：xxxx</p>
          <p>邮政编码：xxxxxx</p>
        </address>
        <hr>
      </header>
      <section>
        <blockquote>
          <p>努力和汗水，我都不会缺！come on！！！</p>
          <p>所有的一切，我都窝在手中！come on！！！</p>
        </blockquote>
        <p>常用块状元素：&lt;div&gt;、&lt;p&gt;、&lt;h1&gt;...&lt;h6&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;address&gt;、&lt;blockquote&gt; 、&lt;form&gt;</p>
        <p><a href="javascript:void(0);">块级元素特点：</a></p>
        <p>1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）</p>
        <p>2、元素的高度、宽度、行高以及顶和底边距都可设置。</p>
        <p>3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。</p>
        <img src="img/banner.jpg" alt="banner" width="500">
        <p>
          常用的内联元素有： &lt;a&gt;、&lt;span&gt;、&lt;br&gt;、&lt;i&gt;、&lt;em&gt;、&lt;strong&gt;、&lt;label&gt;、&lt;q&gt;、&lt;var&gt;、&lt;cite&gt;、&lt;code&gt;
        </p>
        <p>内联元素特点：</p>
        <p>1、和其他元素都在一行上；</p>
        <p>2、元素的高度、宽度、行高及顶部和底部边距不可设置；</p>
        <p>3、元素的宽度就是它包含的文字或图片的宽度，不可改变</p>
        <p>在html中&lt;div&gt;、 &lt;p&gt;、&lt;h1&gt;、&lt;form&gt;、&lt;ul&gt; 和 &lt;li&gt;就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。</p>
        <p>在html中，&lt;span&gt;、&lt;a&gt;、&lt;label&gt;、&lt;input&gt;、 &lt;img&gt;、 &lt;strong&gt; 和&lt;em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。 常用的内联块状元素有：
        </p>
        <p>
          &lt;img&gt;、&lt;input&gt;
        </p>
        <p>内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，&lt;img&gt;、&lt;input&gt;标签就是这种内联块状标签。</p>
        <p>inline-block元素特点：</p>
        <p>1、和其他元素都在一行上；</p>
        <p>2、元素的高度、宽度、行高以及顶和底边距都可设置。</p>
      </section>
      <section>
        <table border="1">
          <caption>插入的表格</caption>
          <thead>
            <tr>
              <th>表头</th>
              <th>表头</th>
              <th>表头</th>
              <th>表头</th>
              <th>表头</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="3">表格单元格</td>
              <td>表格单元格</td>
              <td>表格单元格</td>
            </tr>
            <tr>
              <td rowspan="2">表格单元格</td>
              <td>表格单元格</td>
              <td>表格单元格</td>
              <td>表格单元格</td>
              <td>表格单元格</td>
            </tr>
            <tr>
              <td>表格单元格</td>
              <td>表格单元格</td>
              <td>表格单元格</td>
              <td>表格单元格</td>
            </tr>
          </tbody>
        </table>
      </section>
      <footer>
        文章底部
      </footer>
    </article>
    <article>
      <header>
        <h1>2.常用标签</h1>
        <h4>常用标签的介绍</h4>
        <p>写在前面的话</p>
        <p>ID
          <time pubdate="20100314" datetime="20100314">20160314</time>
        </p>
        <hr>
      </header>
      <section>
        <img src="img/查询房价_02.jpg" alt="查询房价_02" width="700">
        <h2>二级标题</h2>
        <ul>
          <li>huocingw@1</li>
          <li>huocingw@1</li>
        </ul>
        <p>
          图片
        </p>
        <figure>
          <figcaption>111111111</figcaption>
          <img src="img/broker-training.jpg" alt="broker-training" width="700">
        </figure>
        <h3>三级标题</h3>
        <p>
          段落
        </p>
      </section>
      <section>
        <h2>二级标题</h2>
        <ol>
          <li>huocingw@1</li>
          <li>huocingw@1</li>
          <li>huocingw@1</li>
        </ol>
      </section>
      <section>
        <h3>三级标题</h3>
        <p>
          段落
        </p>
      </section>
      <footer>
        文章底部
      </footer>
    </article>
  </main>
  <aside>
    右边栏
    <ol>
      <li><a href="javascript:void(0);">排名列表</a></li>
      <li><a href="javascript:void(0);">排名列表</a></li>
      <li><a href="javascript:void(0);">排名列表</a></li>
      <li><a href="javascript:void(0);">排名列表</a></li>
    </ol>
    <section>
      <div>
        <input type="text">
        <button>查询</button>
      </div>
      <p>推荐</p>
    </section>
  </aside>
  <form action="">
    <p>注册界面</p>
    <fieldset>
      <legend>基本信息</legend>
      <p>
        姓名：
        <input type="text">
      </p>
      <p>
        性别：
        <input name="gender" type="radio" id="one">
        <label for="one">男</label>
        <input name="gender" type="radio" id="two">
        <label for="two">女</label>
      </p>
      <p>
        年龄：
        <input type="number">
      </p>
      <p>
        毕业年限：
        <label>
          <input type="checkbox">一年以内</label>
        <label>
          <input type="checkbox"> 五年以内
        </label>
        <label>
          <input type="checkbox">十年以内</label>
      </p>
    </fieldset>
    <fieldset>
      <legend>登录信息</legend>
      <p>
        密码：
        <input type="password">
      </p>
      <p>
        重复密码：
        <input type="password">
      </p>
    </fieldset>
    <fieldset>
      <legend>其他信息</legend>
      <p>
        头像：
        <input type="file">
      </p>
      <p>
        城市：
        <select name="" id="">
          <optgroup label="1">
            <option value="">北</option>
            <option value="">上</option>
            <option value="">广</option>
            <option value="">深</option>
          </optgroup>
          <optgroup label="2">
            <option value="">else</option>
          </optgroup>
        </select>
      </p>
      <p>
        技能：
        <input type="text" list="jn">
        <datalist id="jn">
          <option value="111">1</option>
          <option value="2222">2</option>
        </datalist>
      </p>
      <p>
        技能熟练：
        <input type="range">
        <!-- <meter max="10" min="0" value="8">8</meter> -->
      </p>
      <p>
        邮箱：
        <input type="email">
      </p>
      <p>
        背景颜色：
        <input type="color">
      </p>
      <p>
        个人签名：
        <textarea name="" id="" cols="30" rows="5"></textarea>
      </p>
    </fieldset>
    <input type="submit" value="Submit" />
    <input type="reset" value="reset" />
  </form>
  <footer>
    版权所有 2016
  </footer>
</body>

</html>
